<template>
  <div class="dynamic-app-container">
    <component :is="currentComponent" v-if="currentComponent" v-bind="componentProps"></component>
    <div v-else class="error-message">
      <p>无法加载应用组件</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DynamicApp',
  data() {
    return {
      currentComponent: null,
      componentProps: {}
    }
  },
  created() {
    this.loadComponent()
  },
  methods: {
    async loadComponent() {
      try {
        const { appType, appData } = this.$route.query
        if (!appType) {
          console.error('未指定应用类型')
          return
        }

        // 根据appType动态导入对应的组件
        // 这里假设组件都放在 components/apps 目录下
        const componentModule = await import(`@/components/apps/${appType}.vue`)
        this.currentComponent = componentModule.default
        this.componentProps = appData ? JSON.parse(appData) : {}
      } catch (error) {
        console.error('加载组件失败:', error)
      }
    }
  },
  watch: {
    // 监听路由参数变化，重新加载组件
    '$route.query': {
      handler() {
        this.loadComponent()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.dynamic-app-container {
  width: 100%;
  height: 100%;
}

.error-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #666;
}
</style>
